import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:tracker/common/widget/common.dart';
import 'package:tracker/pages/home/vip_service/widget/other_record.dart';
import 'package:tracker/pages/home/vip_service/widget/security_record.dart';

import '../../../../provider/global_provider.dart';
import '../../../../theme/app_theme.dart';
import '../mixin/vip_service_mixin.dart';

class VipServicePage extends ConsumerStatefulWidget {
  final int chooseTabIndex;

  const VipServicePage({super.key,required this.chooseTabIndex});

  @override
  ConsumerState<VipServicePage> createState() => _VipServicePageState();
}

class _VipServicePageState extends ConsumerState<VipServicePage>
    with VipServicePageMixin, SingleTickerProviderStateMixin {

  @override
  void initState() {
    tabController = TabController(length: tabs.length, vsync: this, initialIndex: widget.chooseTabIndex);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('VIP服务', style: TextStyle(fontSize: 18)),
          centerTitle: true,
          backgroundColor: AppTheme.themeConfig.navBarColor,
          foregroundColor: AppTheme.themeConfig.primaryColor,
          leading: GestureDetector(
            onTap: () {
              Navigator.pop(context);

            },
            child: Container(
              height: kToolbarHeight,
              padding: const EdgeInsets.only(top: 8),
              alignment: Alignment.center,
              child: const Text(' <返回',
                  textAlign: TextAlign.center,
                  maxLines: 1,
                  style: TextStyle(color: Colors.black)),
            ),
          ),
        ),
        backgroundColor: AppTheme.themeConfig.navBarColor,
        body: Column(
          children: [
            buildDeviceInfo(),
            TabBar(
                overlayColor:
                    const MaterialStatePropertyAll(Colors.transparent),
                padding: const EdgeInsets.only(left: 0, right: 0, top: 20),
                labelColor: AppTheme.themeConfig.primaryColor,
                labelStyle: const TextStyle(fontSize: 14),
                indicatorColor: AppTheme.themeConfig.primaryColor,
                unselectedLabelStyle: const TextStyle(fontSize: 14),
                unselectedLabelColor: Colors.black,
                tabs: tabs.map((e) => Tab(text: e)).toList(),
                controller: tabController),
            Expanded(
                child: Container(
              color: Colors.white,
              child: TabBarView(
                  controller: tabController,
                  children: tabs.map((e) => _buildTabItem(e)).toList()),
            ))
          ],
        ));
  }

  Widget _buildTabItem(String tab) {
    int index = tabs.indexOf(tab);
    switch (index) {
      case 0:
        return const SecurityRecord();
      // case 3:
      //   return const ;
      default:
        return OtherRecord(index: index);
    }
  }

  Widget buildDeviceInfo() {
    final deviceInfo = ref.watch(deviceInfoProvider);
    return Padding(
      padding: const EdgeInsets.only(left: 20),
      child: Row(
        children: [
          const ClipOval(
            child: Image(
              image: AssetImage('assets/images/logo/xlww_logo_120.png'),
              width: 50,
            ),
          ),
          const SizedBox(width: 10),
          Expanded(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              lpText(deviceInfo.deviceName ?? ""),
              lpText("设备号: ${deviceInfo.imei}"),
            ],
          ))
        ],
      ),
    );
  }
}